<template>
    <basic-container>
        <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
          <el-container>
            <el-container>
              <el-aside width="150px">
                <el-button type="primary" @click="saveLine">保存</el-button>
                <el-button type="primary" @click="handlePrint">打印</el-button>
              </el-aside>
              <el-container>
                <el-main style="background: #fff!important">
                  <div v-for="arr in logList" style="width:120px;margin-left: 10px;min-height: 20px;font-size: 12px;float: left;">
                    <span>{{arr.operator}}</span>
                    <br/>
                    <span style="width:100px">{{arr.time}}</span>
                  </div>
                </el-main>
              </el-container>
            </el-container>
          </el-container>
        </div>
      <template>
        <div id="printDetail">
          <br/>
          <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5">
            <div class="block">
              产品工艺名称： {{productProcessName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              产品类型： {{productLineType}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              品号：{{articleNumber}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              流程图号：{{flowChartNo}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              工艺模板：{{craftLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              标准工时：<avue-input-number v-model="standardWorkHours" :controls=false :min="0" style="width:125px;margin-right: 5px" placeholder="请输入标准工时" ></avue-input-number> 分/件

            </div>
          </div>
          <br/>
          <el-container>
            <el-main class="demo" style="border: #e0e0e0 solid 1px;">
                <avue-flow :height="800"
                                  width="100%"
                                  ref="flow"
                                  :option="option"
                                  v-model="flowForm">
                <template #header="{node}" >
                  {{(node || {}).name}}
                  <i class="el-icon-delete"  style="cursor: pointer;float: right;line-height: 30px;margin-right: 2px" @click="deleteNode(node)"></i>
                </template>
                <template slot-scope="{node}">
                  <el-collapse :ref="node.id+`Ref`" v-model="formCollapse"  @change="collapseChange(node.id)" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                  <!--<el-collapse  v-model="showActive[node.id]" style="width:100%;">-->
                    <el-collapse-item title="工艺属性" :name="node.id" >
                      <el-descriptions  class="margin-top"  title="" :column="1" size="small" border >
                        <el-descriptions-item  v-if="form[node.id+`show`]"  label="物料">
                          <!--<avue-select   v-model="form[node.id+`_material`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择物料"  :props="{label: 'materialName',value: 'id'}"  :dic="materialDataList" ></avue-select>-->
                          <el-select v-model="form[node.id+`_material`]"  :ref="node.id+`materialRef`" placeholder="请选择物料"  :popper-append-to-body="false" filterable clearable  dialogWidth="100%"  multiple  >
                            <el-option
                              v-for="item in materialDataList"
                              @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)"
                              style="width: 600px"
                              :label="item.label"
                              :value="item.label">
                            <span style="float: right;margin-right:2px;margin-bottom:10px;">
                              <el-input-number :controls="false" style="width:120px" v-model="form[node.id+`_material`+item.id+`_ratio`]" @click.native.stop="inputFocus(item, $event)" placeholder="请输入配比"></el-input-number>
                            </span>
                              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                                <span style="font-size: 13px;margin-bottom:10px;">{{item.label }}</span>
                              </el-tooltip>
                            </el-option>
                          </el-select>

                        </el-descriptions-item>
                        <el-descriptions-item  v-if="form[node.id+`show`]"  label="辅料">
                          <!--<avue-select   v-model="form[node.id+`_auxiliaryMaterial`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择辅料"  :props="{label: 'materialName',value: 'id'}"  :dic="auxiliaryMaterialList" ></avue-select>-->
                          <el-select v-model="form[node.id+`_auxiliaryMaterial`]" :ref="node.id+`auxiliaryMaterialRef`" placeholder="请选择辅料"  :popper-append-to-body="false" filterable clearable  dialogWidth="100%"  multiple  >
                            <el-option
                              v-for="item in auxiliaryMaterialList"
                              @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)"
                              style="width: 600px"
                              :label="item.label"
                              :value="item.label">
                               <span style="float: right;margin-right:2px;margin-bottom:10px;">
                                <el-input-number :controls="false" style="width:120px" v-model="form[node.id+`_auxiliaryMaterial`+item.id+`_ratio`]" @click.native.stop="inputFocus(item, $event)" placeholder="请输入配比"></el-input-number>
                               </span>
                              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                                <span style="font-size: 13px;margin-bottom:10px;">{{item.label }}</span>
                              </el-tooltip>
                            </el-option>
                          </el-select>

                        </el-descriptions-item>
                     <!--   <el-descriptions-item label="设备分类">
                          <avue-select   v-model="form[node.id+`_deviceClass`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择设备分类"  :props="{label: 'label',value: 'value'}"  :dic="deviceClassList" ></avue-select>
                        </el-descriptions-item>-->
                        <el-descriptions-item  v-if="form[node.id+`show`]"  label="作业指导书">
                          <el-upload
                            class="avatar-uploader"
                            accept="application/pdf"
                            list-type="text"
                            action="#"
                            :file-list="form[node.id+`_workingBookFileList`]"
                            :show-file-list="false"
                            :http-request="(file)=>{uploadFile(file, node.id)}"
                            :auto-upload="false"
                            :before-remove="(file, file_list)=>{beforeRemove(file, file_list, node.id)}"
                            :on-change="(file, file_list)=>{workingBookChange(file, file_list, node.id)}"
                            :limit="2">
                            <el-button size="mini" type="primary" plain>选择作业指导书</el-button>
                          </el-upload>
                          <div  style="float: left;">
                            <a target="_blank" :href="form[node.id+`_workingBookFileListPDF`]">{{form[node.id+`_workingBookFileListPDFName`]}}</a><i class="el-icon-delete" style="cursor:pointer;margin-left: 2px" v-if="form[node.id+`_workingBookFileListPDF`]!='#' "@click="deleteWorkingBook(node.id)" ></i>
                          </div>
                        </el-descriptions-item>

<!--                        <el-descriptions-item  v-if="form[node.id+`show`]"  label="自定义属性">
                          <div  v-for="item in customList[node.id]" :key="item.id">
                            {{item.parameterName}}：<el-input v-model="form[node.id+`_`+item.id]" size="mini"style="width: 50px" ></el-input> {{item.unit}}
                            <br/>
                          </div>
                        </el-descriptions-item>-->

                      </el-descriptions>

                    </el-collapse-item>
                  </el-collapse>
                </template>
              </avue-flow>
            </el-main>
          </el-container>
        </div>
      </template>

    </basic-container>
</template>

<script>
    import {getDeviceClassList} from '@/api/hengdong/pfocinterface' //获取设备相关
    import {getPfocProcessList } from '@/api/pfoc/pfocprocess'  //获取工艺
    import {getCraftProductList } from '@/api/pfoc/craftproduct' //获取工艺模板
    import {getCraftProductLineDetailsList,} from '@/api/pfoc/craftproductline'
    import { getItemCodeList } from '@/api/workorder/workordercps'  //获取品号集合
    // import { getMaterialAccessoryLibraryList } from '@/api/pfoc/materialaccessorylibrary'  //获取0:物料;1:辅料;
    import {groupItemCodeAndItemSpecification} from "@/api/workorder/workorderbom"; //获取工单物料

    import {updateCraftProdictLine,delCraftProdictLine} from '@/api/pfoc/craftproductline'
    import {uploadSubmit,deletWorkBook,getCraftProductLineDetails} from '@/api/pfoc/craftproductlinedetails'
    import { getLogList} from '@/api/pfoc/productlinelog'
    import {tableOption} from '@/const/crud/pfoc/craftproductlinedetails'

    export default {
        name: "craft",
        props:{
            productProcessId:{
                type:String
            },
            productLineTypeList:{//产线类型集合
                type:Array
            }
        },
        data() {
            return {
                formCollapse: [],
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                pfocProcessList:[],//工艺集合
                processAttributeList:[],//工艺通用属性集合
                processAttributeDataList:[],//工艺通用属性数据集合
                deviceClassList:[],//设备分类集合
                articleNumber:null,//品号
                craftLineName:null,//工艺模板名称
                craftLineMainData:{},//工艺产线主变数据
                craftLineSubData:[],//工艺产线子表数据
                craftLinedetailsDelIds:[],//存储需要删除的节点工艺ID（即已有工艺删除ID）
                tableLoading: false,
                tableOption: tableOption,
                option: {
                    name: null,
                    nodeList: [],//工艺节点集合
                    lineList: [],//工艺各节点指向顺序集合
                },
                fileData: new FormData(),
                loading:false,
                logList:[],//操作日志集合
                productLineType:null,//产品类型
                flowChartNo:null,//流程图号
                articleNumbeList:[],//品号集合
                materialDataList:[],//物料集合
                auxiliaryMaterialList:[],//辅料集合
                craftId:null,//工艺模板ID
                productProcessName:null,//产品工艺名称
                workList:[],//作业指导书集合
                craftProductList:[],//工艺模板集合
                customList:[],//自定义属性集合
                showActive:[],//属性展示model集合
                zIndexStyle:"",
                standardWorkHours:undefined,//标准工时

            };
        },
        computed: {
          nodeList () {
            return this.option.nodeList
          }
        },
        watch: {
          formCollapse(newVal, oldVal) {
            const len = newVal.length
            if (len > 3) {
              newVal.length = 3
              //修改提示
              this.$message.warning("一次最多打开三个。")
              return
            }
            oldVal.map(item => {
              this.form[item + 'show'] = false
            })
            newVal.map(item => {
              this.form[item + 'show'] = true
            })
          }
        },
        created() {
            //获取工单物料
            this.getWorkOrderMaterialListData();
            //获取品号集合
            this.getItemCodeListData();
            //获取工艺模板集合
            this.getCraftProductListData();
            //获取当前产线日志
            this.getLogListData();
        },
        mounted() {
/*            //获取工艺
            this.getPfocProcessListData();
            //获取物料集合
            this.getMaterialDataLists();
            //获取辅料集合
            this.getAuxiliaryMaterialLists();
            //获取设备分类数据
            this.getDeviceClassListData();*/
        },
        methods: {
            inputFocus(e, event) {
                event.stopPropagation()
            },
            getCraftProductLineDetails(){
                if(!this.validatenull(this.productProcessId)) {
                    this.tableLoading = true
                    getCraftProductLineDetailsList(this.productProcessId).then(response => {
                        this.formCollapse = []
                        this.$refs.flow.resetPlumb();
                        var data =response.data.data;
                        //获取工艺产线主表数据
                        this.craftLineMainData= data.craftProductLine;//工艺产线主变数据

                        //获取工艺产线子表数据
                        this.craftLineSubData = data.craftProductLineDetailsList;//工艺产线子表数据
                        this.articleNumber=this.craftLineMainData.articleNumber;//品号
                        this.productLineType=this.craftLineMainData.productLineType;//产品类型
                        this.flowChartNo = this.craftLineMainData.flowChartNo;//流程图号
                        this.standardWorkHours = this.craftLineMainData.standardWorkHours;//标准工时
                        this.productProcessName=this.craftLineMainData.productProcessName;//产品工艺名称
                        this.craftId=this.craftLineMainData.craftId;//工艺模板ID
                        for (let i = 0; i < this.craftProductList.length; i++) {
                            if( this.craftProductList[i].id==this.craftId){
                                this.craftLineName= this.craftProductList[i].craftLineName;//工艺模板名称
                            }
                        }

                        //设置反显工艺
                        this.option.nodeList = JSON.parse(this.craftLineMainData.processNodes);
                        //设置反显工艺指向顺序
                        this.option.lineList =  JSON.parse(this.craftLineMainData.processNodeLine);
                        //工艺自定义参数集合
                        this.customList = this.craftLineMainData.map;
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;
                        //注册动态节点变量
                         this.reverseDisplay();//反显方法
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        console.log(this.form)
                        console.log(this.option.nodeList)
                        console.log(this.option.lineList)
                        this.tableLoading = false
                    }).catch(() => {
                        this.tableLoading = false
                    })
                }
            },
            /**注册各节点动态变量并设置反显*/
            reverseDisplay(){
              //注册动态节点变量
              for(var n=0;n<this.craftLineSubData.length;n++) {
                var  nodeId = this.craftLineSubData[n].nodeId;
                this.$set(this.form, nodeId+ "_processId", this.craftLineSubData[n].processId);//注册动态节点-当前工艺ID
                /*if(this.validatenull(this.craftLineSubData[n].deviceClass)){
                    this.$set(this.form, nodeId+ "_deviceClass", this.craftLineSubData[n].deviceClass);//注册动态节点-设备类型
                }else {
                    this.$set(this.form, nodeId + "_deviceClass", this.craftLineSubData[n].deviceClass.split(","));//注册动态节点-设备类型
                }*/
                if(this.validatenull(this.craftLineSubData[n].material)){
                  this.$set(this.form, nodeId+ "_material", this.craftLineSubData[n].material);//注册动态节点-物料
                }else {
                  for(var j=0;j< this.craftLineSubData[n].materialRatio.split(",").length;j++){
                    var index = this.materialDataList.findIndex(item => item.label === this.craftLineSubData[n].material.split("#@")[j]);
                    var radio =this.craftLineSubData[n].materialRatio.split(",")[j];
                    if(radio ==="undefined"){
                      this.$set(this.form, nodeId + "_material"+(index+1)+"_ratio", undefined);//注册动态节点-物料比例
                    }else{
                      this.$set(this.form, nodeId + "_material"+(index+1)+"_ratio", radio);//注册动态节点-物料比例
                    }
                  }
                  this.$set(this.form, nodeId + "_material", this.craftLineSubData[n].material.split("#@"));//注册动态节点-物料
                }
                if(this.validatenull(this.craftLineSubData[n].auxiliaryMaterial)){
                  this.$set(this.form, nodeId+ "_auxiliaryMaterial", this.craftLineSubData[n].auxiliaryMaterial);//注册动态节点-辅料
                }else {
                  for(var j=0;j<  this.craftLineSubData[n].auxiliaryMaterialRatio.split(",").length;j++){
                    var index = this.auxiliaryMaterialList.findIndex(item => item.label === this.craftLineSubData[n].auxiliaryMaterial.split("#@")[j]);
                    var radio =this.craftLineSubData[n].auxiliaryMaterialRatio.split(",")[j];
                    if(radio ==="undefined"){
                      this.$set(this.form, nodeId + "_auxiliaryMaterial"+(index+1)+"_ratio", undefined);//注册动态节点-物料比例
                    }else{
                      this.$set(this.form, nodeId + "_auxiliaryMaterial"+(index+1)+"_ratio", radio);//注册动态节点-物料比例
                    }
                  }
                  this.$set(this.form, nodeId + "_auxiliaryMaterial", this.craftLineSubData[n].auxiliaryMaterial.split("#@"));//注册动态节点-辅料
                }

                let obj = new Object();
                //注册动态节点-各工艺作业指导书默认URL
                if(this.validatenull(this.craftLineSubData[n].workingBook)){
                  this.$set(this.form, nodeId+ "_workingBookFileListPDF",  "#");
                }else {
                  this.$set(this.form, nodeId + "_workingBookFileListPDF", this.craftLineSubData[n].workingBook);
                  obj.url =this.craftLineSubData[n].workingBook;
                }
                //注册动态节点-各工艺作业指导书默认名称
                if(this.validatenull(this.craftLineSubData[n].workingBookName)){
                  this.$set(this.form, nodeId+ "_workingBookFileListPDFName",  null);
                }else {
                  this.$set(this.form, nodeId + "_workingBookFileListPDFName", this.craftLineSubData[n].workingBookName);
                  obj.name = this.craftLineSubData[n].workingBookName;
                }

                //获取自定义属性数据集合
                var customArr = JSON.parse(this.craftLineSubData[n].customAttribute);
                //自定义属性
                for(var j = 0; j <this.customList[nodeId].length;j++){
                  for (var m = 0; m<customArr.length; m++){
                    if(nodeId+"_"+this.customList[nodeId][j].id == customArr[m].model){
                      this.$set(this.form,nodeId+"_"+this.customList[nodeId][j].id, customArr[m].value);
                    }
                  }
                }
              }
            },
            /**获取品号*/
            getItemCodeListData(){
              getItemCodeList().then(response => {
                    this.articleNumbeList=response.data.data;
                })
            },
            /**获取工艺*/
            getPfocProcessListData(){
                getPfocProcessList().then(response => {
                    this.pfocProcessList=response.data.data;
                    // console.log(this.pfocProcessList)
                })

            },
            /**获取工艺模板集合*/
            getCraftProductListData(){
                getCraftProductList().then(response => {
                    this.craftProductList=response.data.data;
                    for (let i = 0; i < this.craftProductList.length; i++) {
                        if( this.craftProductList[i].id==this.craftId){
                            this.craftLineName= this.craftProductList[i].craftLineName;//工艺模板名称
                        }
                    }
                })

            },
            /**获取工单物料*/
            getWorkOrderMaterialListData(){
              groupItemCodeAndItemSpecification().then(response => {
                var list = response.data.data;
                list.forEach((item, index) => {
                  item.id = index + 1; // 假设ID从1开始
                  item.label = "【"+item.itemCode+"】" + "【"+item.itemName+"】" + "【"+item.itemSpecification+"】";
                });
                this.materialDataList=list;//物料集合
                this.auxiliaryMaterialList=list;//辅料集合
                //注册动态节点变量
                this.reverseDisplay();//反显方法
              })
            },
            /*/!**获取物料集合*!/
            getMaterialDataLists(){
                var data={
                    materialType:"0",
                    delFlag:"0"
                }
                getMaterialAccessoryLibraryList(data).then(response => {
                    this.materialDataList=response.data.data;
                })

            },
            /!**获取辅料集合*!/
            getAuxiliaryMaterialLists(){
                var data={
                    materialType:"1",
                    delFlag:"0"
                }
                getMaterialAccessoryLibraryList(data).then(response => {
                    this.auxiliaryMaterialList=response.data.data;
                })
            },*/
            /**获取设备分类数据*/
            getDeviceClassListData(){
                getDeviceClassList().then(response => {
                    this.deviceClassList=response.data.data;
                    // console.log(this.deviceClassList)
                })
            },
            /**添加工艺*/
            addProcessNode(name,id,workshopSection){//工艺名称，工艺ID
                this.$refs.flow.addNode(name,id,this.nodeCount);//添加节点
                this.$set(this.form, "node"+this.nodeCount+"_processName", name);//注册动态节点-当前工艺名称
                this.$set(this.form, "node"+this.nodeCount+"_processId", id);//注册动态节点-当前工艺ID
                this.nodeCount=this.nodeCount+1;//更新节点下标
            },
            /**删除工艺*/
            deleteNode(node){
                var t = this;
                const id = node.id
                this.$confirm("确定要删除节点" + node.name + "?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    closeOnClickModal: !1
                }).then((function() {
                    t.$refs.flow.deleteNode(id);
                    //新增数据删除
                    if(t.siftProcess(id)) {//判断当前工艺是新增还是修改
                        var  deleteId = null
                        //修改数据删除
                        for (var n=0;n< t.craftLineSubData.length;n++){
                            if(t.craftLineSubData[n].nodeId == id){
                                deleteId = t.craftLineSubData[n].id
                            }
                        }
                        if(!t.validatenull(deleteId)){
                            t.craftLinedetailsDelIds.push(deleteId)
                        }
                    }
                    t.option.nodeList = t.option.nodeList;

                    t.$delete(t.form, id+"_material"); //物料变量删除
                    t.$delete(t.form, id+"_auxiliaryMaterial");//辅料变量删除
                    t.$delete(t.form, id+"_workingBookFileListPDF");//注册动态节点-各工艺作业指导书默认URL
                    t.$delete(t.form, id+"_workingBookFileListPDFName");//注册动态节点-各工艺作业指导书默认名称
                    t.$delete(t.form, id+"_workingBookFileList");//注册动态节点-各工艺控制作业指导书列表上传前可以切换文件
                    t.$delete(t.form, id+"_processName");//删除动态节点-当前工艺名称
                    t.$delete(t.form, id+"_processId");//删除动态节点-当前工艺ID
                    // t.$delete(t.form, id+"_deviceClass");
                    //自定义属性变量动态删除
                    for(var j = 0; j <t.customList[id].length;j++){
                        t.$delete(t.form,id+"_"+t.customList[id][j].id);
                    }
                })).catch((function() {}));

            },
            /**保存修改工艺产线*/
            saveLine(){
                if(this.validatenull(this.articleNumber)){
                    this.$message.warning("品号不能为空。")
                    return;
                }
                if(this.validatenull(this.craftLineName)){
                    this.$message.warning("工艺模板不能为空。")
                    return;
                }
                if(this.validatenull(this.option.nodeList)){
                    this.$message.warning("请选择工艺创建工艺产线。")
                    return;
                }
                if(this.validatenull(this.standardWorkHours)){
                    this.$message.warning("请输入工艺标准工时。")
                    return;
                }
              //组装需要提交的数据-工艺主表数据组装
                var params = {};//主表参数集合
                params.id = this.productProcessId;//产品工艺ID
                params.productProcessName = this.productProcessName;//产品工艺名称
                params.articleNumber = this.articleNumber;//品号
                params.craftId = this.craftId;//工艺模板ID
                params.productLineType = this.productLineType;//产品类型
                params.flowChartNo = this.flowChartNo;//流程图号
                params.processNodes = JSON.stringify(this.option.nodeList);//工艺节点集合（其中mark字段为工艺ID）
                params.processNodeLine = JSON.stringify(this.option.lineList);//工艺各节点指向顺序集合
                params.standardWorkHours = this.standardWorkHours;//标准工时
                console.log(params)

               //组装需要提交的数据-工艺子表数据组装
                var objArr = [];//需要新增的工艺集合
                var objUpateArr=[];//需要修改的工艺集合
                //循环工艺节点集合
                for(var i=0;i<this.option.nodeList.length;i++){
                    var obj = new Object();//创建对象
                    obj['auxiliaryMaterialRatio'] ="";
                    var auxiliaryMaterial =this.form[this.option.nodeList[i].id + '_auxiliaryMaterial'];
                    if(!this.validatenull(auxiliaryMaterial)) {
                        for(var m=0;m< auxiliaryMaterial.length;m++){
                            //获取子的下标item.label
                            var index = this.auxiliaryMaterialList.findIndex(item => item.label === auxiliaryMaterial[m]);
                            //比例
                            var ratio = this.form[this.option.nodeList[i].id + '_auxiliaryMaterial'+(index+1)+"_ratio" ]
                            if(this.validatenull(ratio)){
                              obj['auxiliaryMaterialRatio'] =  obj['auxiliaryMaterialRatio'] + undefined+",";
                            }else{
                              obj['auxiliaryMaterialRatio'] =  obj['auxiliaryMaterialRatio'] + ratio+",";
                            }
                          }
                        obj['auxiliaryMaterialRatio'] = obj['auxiliaryMaterialRatio'].slice(0, -1);
                        obj['auxiliaryMaterial'] = auxiliaryMaterial.join('#@');
                    }else{
                        obj['auxiliaryMaterial'] = null;
                    }
                    obj['materialRatio'] ="";
                      var material = this.form[this.option.nodeList[i].id + '_material'];
                      if(!this.validatenull(material)) {
                        for(var m=0;m< material.length;m++){
                          //获取子的下标
                          var index = this.materialDataList.findIndex(item => item.label === material[m]);
                          //比例
                          var ratio = this.form[this.option.nodeList[i].id + '_material'+(index+1)+"_ratio"]
                          if(this.validatenull(ratio)){
                            obj['materialRatio'] =  obj['materialRatio'] + undefined+",";
                          }else{
                            obj['materialRatio'] =  obj['materialRatio'] + ratio+",";
                          }
                        }
                        obj['materialRatio'] = obj['materialRatio'].slice(0, -1);
                        obj['material'] = material.join('#@');
                      }else{
                        obj['material'] = null;
                      }

                    // if(!this.validatenull(this.form[this.option.nodeList[i].id + '_deviceClass'])) {
                    //     obj['deviceClass'] = this.form[this.option.nodeList[i].id + '_deviceClass'].toString();
                    // }else{
                    //     obj['deviceClass'] = null
                    // }
                    obj['processId'] = this.option.nodeList[i].mark;//取出工艺ID加入对象
                    obj['nodeId'] = this.option.nodeList[i].id;
                    obj['craftLineId'] = this.productProcessId;//设置产品工艺ID
                    var customArr=[];
                    //自定义属性
                    for(var j = 0; j <this.customList[this.option.nodeList[i].id].length;j++){
                        var customObj = new Object();//创建自定义属性对象
                        customObj.model=this.option.nodeList[i].id+"_"+this.customList[this.option.nodeList[i].id][j].id;
                        customObj.key = this.customList[this.option.nodeList[i].id][j].parameterName;
                        customObj.unit = this.customList[this.option.nodeList[i].id][j].unit;
                        if(!this.validatenull(this.form[customObj.model])) {
                            customObj.value = this.form[customObj.model];

                        }else{
                            customObj.value = null;
                        }
                        customArr[j] = customObj;
                    }
                    obj['customAttribute'] = JSON.stringify(customArr);

                    //最后加入提交新增数据数组
                    if(!this.siftProcess(this.option.nodeList[i].id)) {//判断当前工艺是新增还是修改
                        objArr.push(obj);
                    }else{//加入提交修改数据数组
                        for (var n=0;n< this.craftLineSubData.length;n++){
                            if(this.craftLineSubData[n].nodeId == this.option.nodeList[i].id){
                                obj['id'] = this.craftLineSubData[n].id
                            }
                        }
                        objUpateArr.push(obj);
                    }
                }
                console.log(objArr)
                console.log(objUpateArr)
                console.log("aaa---------:"+this.craftLinedetailsDelIds)
                var data={
                    craftProductLine:params,
                    craftProductLineDetailsList:objArr,
                    craftProductLineDetailsUpdateList:objUpateArr,
                    craftProductLineDetailsDeleteIds:this.craftLinedetailsDelIds
                }
                //提交
                updateCraftProdictLine(data).then(response => {
                    this.$message.success("修改成功。")
                    //获取工艺产线子表数据
                    this.craftLineSubData = response.data.data;//工艺产线子表数据
                    this.$emit('closeEditCraft');//关闭新增页面
                    this.getLogListData();//重新获取操作日志
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading = false
                });
            },
            /**区分新增工艺、修改工艺*/
            siftProcess(nodeId){
                var flg = false;//默认新增为false，修改为true
                //循环已添加的工艺集合根据节点ID区分新增和修改工艺
                for (var n=0;n< this.craftLineSubData.length;n++){
                    if(this.craftLineSubData[n].nodeId == nodeId){
                        flg=true;
                    }
                }
                return flg;
            },
            handleClick (node) {
                this.$message.success(JSON.stringify(node))
            },
            handleNext () {
                this.count++
                if (this.count >= this.nodeList.length) {
                    this.count = 0;
                }
                this.flowForm = this.nodeList[this.count].id;
            },
            viewShunxu(){
                this.$message.success(JSON.stringify(this.option.lineList))
                /*this.$message.success(JSON.stringify(this.option.nodeList))*/
            },
            refreshChange(){
                getCraftProductLineDetails(this.productProcessId).then(response => {
                    //获取工艺产线子表数据
                    this.craftLineSubData = response.data.data;//工艺产线子表数据
                })
            },
            //作业指导书上传文件选择
            workingBookChange(file, fileList,nodeId){
                var isType=null;
                isType = file.name.substring(file.name.lastIndexOf('.'));
                this.form[nodeId+"_workingBookFileList"] = fileList.slice(-1);
                if(isType === '.pdf'){
                    file.url = URL.createObjectURL(file.raw);//创建上传文件URL
                    // this.form[nodeId+"_workingBookFileListPDF"]=file.url;
                    // this.form[nodeId+"_workingBookFileListPDFName"]=file.name;
                    //将需要上传的作业指导书存入集合
                    file.raw.node = nodeId;//设置作业指导书所属工艺顺序方便上传后保存对应工艺
                    this.workList[nodeId+"work"] = file;
                    var id;
                    for(var n=0;n<this.craftLineSubData.length;n++) {
                        debugger;
                        if(this.craftLineSubData[n].nodeId == nodeId){
                            id= this.craftLineSubData[n].id;
                        }
                    }
                    var fileData = new FormData();
                    fileData.append("id", id);
                    fileData.append('file[]',file.raw);
                    uploadSubmit(fileData).then(response => {
                        this.$message({
                            message: "上传成功了",
                            type: 'success'
                        });
                        var workingBook = response.data.data.workingBook;
                        var workingBookName = response.data.data.workingBookName;
                        if (workingBook != "" && workingBook != null) {
                            this.$set(this.form, nodeId + "_workingBookFileListPDF", workingBook);
                            this.$set(this.form, nodeId + "_workingBookFileListPDFName", workingBookName);
                        }
                    }).catch(response => {
                        this.$message({
                            message: "上传失败了",
                            type: 'error'
                        });
                        this.$set(this.form, nodeId+ "_workingBookFileListPDF",  "#");
                        this.$set(this.form, nodeId+ "_workingBookFileListPDFName", null);
                    })



                }
                isType = file.raw.type==='application/pdf';
                if (!isType) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为application/pdf格式的作业指导书文件。'
                    })
                }

              /*  const isLt = file.size / 1024 / 1024 < 10;
                if (!isLt) {
                    this.$notify.warning({
                        title: '警告',
                        message: '上传作业指导书文件大小不能超过 10MB!'
                    })
                }*/
                return isType; //&& isLt;
            },
            //作业指导书文件删除
            deleteWorkingBook(nodeId){
                var id;
                for(var n=0;n<this.craftLineSubData.length;n++) {
                    if(this.craftLineSubData[n].nodeId == nodeId){
                        id= this.craftLineSubData[n].id
                    }
                }
                var formdata = new FormData();
                formdata.append("id", id);
                deletWorkBook(formdata).then(response => {
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    });
                    this.form[nodeId+"_workingBookFileListPDF"]="#";//各工艺作业指导书默认URL
                    this.form[nodeId+"_workingBookFileListPDFName"]=null;//各工艺作业指导书默认名称
                    this.form[nodeId+"_workingBookFileList"]=[];//各工艺控制作业指导书列表上传前可以切换文件
                    this.$delete(this.workList, nodeId+"work");//同时清空作业指导书上传集合
                }).catch(response => {
                    this.$message({
                        message: "删除失败",
                        type: 'error'
                    });
                })

            },
            //打印
            handlePrint () {
                this.$Print('#printDetail');
            },
            //获取产品工艺日志
            getLogListData(){
                getLogList(this.productProcessId).then(response => {
                    this.logList=response.data.data;
                })
            },
            //鼠标移到置顶
            handleMouseEnter(nodeId) {
                //属性鼠标移到展开
                // this.$set(this.showActive, nodeId, ['1']);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                this.zIndexStyle="1";

            },
            //鼠标移开取消置顶
            handleMouseLeave(nodeId) {
                //属性鼠标移开关闭
                // this.$set(this.showActive, nodeId, []);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                this.zIndexStyle="";

            },
            //伸缩面板切换
            collapseChange(nodeId){
                let material=nodeId+"materialRef";
                let auxiliaryMaterial =nodeId+"auxiliaryMaterialRef";
              if (this.$refs[material] === document.activeElement){ //判断是否有焦点
                this.$refs[material].blur();
              }
              if ( this.$refs[auxiliaryMaterial]===document.activeElement) {//判断是否有焦点
                this.$refs[auxiliaryMaterial].blur();
              }
            }
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }
  /deep/.el-select-dropdown.is-multiple .el-select-dropdown__item{
    padding-right: 10px!important;
  }

/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
/deep/.el-card__body{
  padding: 0px!important;
}
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

</style>
